<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重要词组</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/mobile-detect/1.4.3/mobile-detect.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.4/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<style>
    #search-div {
        z-index: 999;
        display: block;
        right: 100px;
        position: fixed;
        top: 50px;
    }

    #search-word {
        height: 50px;
        width: 224px;
    }
</style>
<div id="search-div">
    <input id="showEN" type="button" value="隐藏英文">
    <input id="showCN" type="button" value="隐藏中文">
    <br>
    <input id="search-word" type="text" placeholder="输入词组，然后按enter键">
</div>
<div class="card" id="phrases">
    <div class="card-body">
        <table class="table table-bordered">
            <tr v-for="phrases in phrasesData">
                <td :name="phrases.index"><span>{{ phrases.index }}</span></td>
                <td :name="phrases.en" class="wordEn"><span>{{ phrases.en }}</span></td>
                <td :name="phrases.cn" class="wordCn"><span>{{ phrases.cn }}</span></td>
            </tr>
        </table>

    </div>

</div>
</body>

<script>

    let app = new Vue({
        el: '#phrases',
        data: {
            phrasesData: [],

        },
        methods: {},
        created: function () {
            if (localStorage.getItem('important_phrases_cache')) {
                this.phrasesData = JSON.parse(localStorage.getItem('important_phrases_cache'));
            } else {
                this.$http.get('important_phrases.json', {}).then(function (data) {
                    this.phrasesData = data.body;
                    localStorage.setItem('important_phrases_cache', JSON.stringify(data.body))
                });

            }
        }
    });

    $('#search-word').keyup(function(event){
        if(event.keyCode === 13){
            let text = $('#search-word').val();
            console.log(text);
            console.log($("[name='"+text+"']").offset());
            $('html, body').animate({
                scrollTop: $("[name='"+text+"']").offset().top
            }, 600);
        }
    });

    $('#showEN').click(function () {
        if ($('#showEN').val() === '隐藏英文') {
            $('.wordEn span').css('visibility', 'hidden');
            $('#showEN').val('显示英文');
        } else {
            $('.wordEn span').css('visibility', 'visible');
            $('#showEN').val('隐藏英文');
        }
    });

    $('#showCN').click(function () {
        if ($('#showCN').val() === '隐藏中文') {
            $('.wordCn span').css('visibility', 'hidden');
            $('#showCN').val('显示中文');
        } else {
            $('.wordCn span').css('visibility', 'visible');
            $('#showCN').val('隐藏中文');
        }
    });

    $('.wordEn').click(function (e) {
        let text = e.currentTarget.attributes.getNamedItem('name').value;
        if ($("[name='" + text + "'] span").css('visibility') === 'visible' ) {
            $("[name='" + text + "'] span").css('visibility', 'hidden');
        }else {
            $("[name='"+text+"'] span").css('visibility', 'visible');

        }
        // console.log(e.currentTarget.attributes);
        // console.log(e.currentTarget.attributes.length);
        // console.log(e.currentTarget.attributes.item(0));
        // console.log(e.currentTarget.attributes.getNamedItem('name').value);
        // console.log(e.currentTarget.attributes.getNamedItem('class').value)
    });

    $('.wordCn').click(function (e) {
        let text = e.currentTarget.attributes.getNamedItem('name').value;
        if ($("[name='" + text + "'] span").css('visibility') === 'visible' ) {
            $("[name='" + text + "'] span").css('visibility', 'hidden');
        }else {
            $("[name='"+text+"'] span").css('visibility', 'visible');

        }
    });

</script>
</html>